<template>
    <!--抢券订单-->
  <div class="app-container">
    <el-form label-width="85px" inline  class="demo-form-inline">
            <el-form-item label="用户名：">
                <el-input v-model="queryParams.user" clearable placeholder="请输入用户名"></el-input>
            </el-form-item>
             <el-form-item label="手机号：">
                <el-input v-model="queryParams.user" clearable placeholder="请输入手机号"></el-input>
            </el-form-item>
            <el-form-item label="奖品名称：">
                <el-input v-model="queryParams.user" clearable placeholder="请输入奖品名称"></el-input>
            </el-form-item>
            <el-form-item label="订单状态：">
                <el-select v-model="queryParams.region1" clearable placeholder="请选择订单状态">
                    <el-option label="全部" value="shanghai"></el-option>
                    <el-option label="区域一" value="shanghai"></el-option>
                    <el-option label="区域二" value="beijing"></el-option>
                </el-select>
            </el-form-item>
            <el-form-item>
              <el-form-item  label="订单时间" prop="startTime">
                    <el-date-picker
                        v-model="queryParams.startTime"
                        align="right"
                        type="date"
                        value-format="yyyy-MM-dd"
                        placeholder="选择开始日期"
                        style="width: 200px;"
                        :picker-options="pickerOptions1">
                    </el-date-picker>
               </el-form-item>
               <el-form-item label="-" label-width="15px" prop="endTime">
                    <el-date-picker
                        v-model="queryParams.endTime"
                        align="right"
                        type="date"
                        value-format="yyyy-MM-dd"
                        placeholder="选择结束日期"
                        style="width: 200px;"
                        :picker-options="pickerOptions1">
                    </el-date-picker>
                </el-form-item>
              </el-form-item>
             <el-form-item>
               <el-form-item  label="支付时间" prop="startTime">
                    <el-date-picker
                        v-model="queryParams.startTime"
                        align="right"
                        type="date"
                        value-format="yyyy-MM-dd"
                        placeholder="选择开始日期"
                        style="width: 200px;"
                        :picker-options="pickerOptions1">
                    </el-date-picker>
               </el-form-item>
               <el-form-item label="-" label-width="15px" prop="endTime">
                    <el-date-picker
                        v-model="queryParams.endTime"
                        align="right"
                        type="date"
                        value-format="yyyy-MM-dd"
                        placeholder="选择结束日期"
                        style="width: 200px;"
                        :picker-options="pickerOptions1">
                    </el-date-picker>
                </el-form-item>
              </el-form-item>
            <el-form-item>
                <el-button type="primary" @click="queryObj">查询</el-button>
                <el-button type="success" @click="exportObj">导出Excel</el-button>
            </el-form-item>
    </el-form>
    <page-table ref="table" index :fetch="getTableList" :query="queryParams">
      <el-table-column align="center" min-width="120" label="用户名" prop="col1"  show-overflow-tooltip/>
      <el-table-column align="center" min-width="120" label="手机号" prop="col2"  show-overflow-tooltip/>
      <el-table-column align="center" min-width="120" label="奖品名称" prop="col3"  show-overflow-tooltip/>
      <el-table-column align="center" min-width="120" label="订单时间" prop="col4" show-overflow-tooltip/>
      <el-table-column align="center" min-width="120" label="订单状态：" prop="col5" show-overflow-tooltip/>
      <el-table-column align="center" min-width="180" label="支付时间" prop="col5" show-overflow-tooltip/>
      <el-table-column align="center" min-width="200" label="操作" >
        <template slot-scope="{row}">
          <el-button type="text" @click="giveUpObj(row)">作废</el-button>
          <el-button type="text" @click="detailsObj(row)">详情</el-button>
        </template>
      </el-table-column>
    </page-table>
  </div>
</template>

<script>
import { getExamplePageList } from '@/api/document'
export default {
  data () {
    return {
      queryParams: {},
      query: false,
      dialogTitle: '',
      pickerOptions1: {
        shortcuts: [{
          text: '今天',
          onClick (picker) {
            picker.$emit('pick', new Date())
          }
        }, {
          text: '昨天',
          onClick (picker) {
            const date = new Date()
            date.setTime(date.getTime() - 3600 * 1000 * 24)
            picker.$emit('pick', date)
          }
        }, {
          text: '一周前',
          onClick (picker) {
            const date = new Date()
            date.setTime(date.getTime() - 3600 * 1000 * 24 * 7)
            picker.$emit('pick', date)
          }
        }]
      }
    }
  },
  methods: {
    getTableList (query) {
      return getExamplePageList(query)
    },
    refreshTable () {
      this.$refs.table.refresh()
    },
    detailsObj () {
    },
    exportObj () {
      //    导出
    },
    giveUpObj (row) {
      var _this = this
      this.confirmBox({
        title: '确认作废标题',
        message: '确认作废说明',
        okText: '确认作废',
        callback (action, instance) {
          // 方法内使用js写法
          if (action === 'confirm') {
            _this.messageBox({
              message: '作废成功！'
            })
            _this.refreshTable()
          } else if (action === 'cancel') {
          }
        }
      })
    },
    submitOk (params) {
      // 回调的是提交时候的完整参数
    },
    submitClose () {
      this.cardType = false
      this.params = {}
      this.$set(this.params, 'arg5', [])
    },
    stopObj (row) {
      var _this = this
      //    var title = ''
      //    var message = ''
      //    var backMessage = ''
      //    var activeStr = ''
      //    if (row.activeStr === '停用') {
      //      title = '确认停用账号'
      //      message = '账号' + row.col1 + '停用后，该账号将无法登陆，确认停用后立即生效。'
      //      backMessage = '该账号已停用！'
      //      activeStr = '停用'
      //    } else if (row.activeStr === '启用') {
      //      title = '确认启用账号'
      //      message = '账号' + row.col1 + '启用后，该账号将恢复使用，确认启动后立即生效。'
      //      backMessage = '该账号已启用！'
      //      activeStr = '启用'
      //    }
      this.confirmBox({
        title: '确认停用账号',
        message: '账号' + '“' + row.col1 + '”' + '停用后，该账号将无法登陆，确认停用后立即生效。',
        okText: '确认停用',
        callback (action, instance) {
          // 方法内使用js写法
          if (action === 'confirm') {
            _this.messageBox({
              message: '该账号已停用！'
            })
            _this.refreshTable()
          } else if (action === 'cancel') {
          }
        }
      })
    },
    queryObj () {
      this.query = this.queryed(this.queryParams)
      this.refreshTable()
    }
  }
}
</script>

<style scoped lang="scss">

</style>
